﻿<Stack HorizontalAlign="Alignment.Start" Style="width:100%;">
    <Stack Horizontal="true" HorizontalAlign="Alignment.SpaceBetween" VerticalAlign="Alignment.End"
              Style=@($"border-bottom: 1px solid {ThemeProvider!.Theme.SemanticColors.BodyDivider}; margin-bottom:18.620px;width:100%;")>
        <div style="font-size:@ThemeProvider!.Theme.FontStyle.FontSize.MediumPlus; font-weight:@ThemeProvider!.Theme.FontStyle.FontWeight.SemiBold;">@Header</div>
        <div>
            <CommandBarButton Text=@codeLabel IconName=@(showCode ? "chevron_up" : "chevron_down") OnClick=@(arg=> { showCode = !showCode; showCCode = false; codeLabel = showCode ? "Hide Code" : "Show Code"; }) />
        </div>
    </Stack>
    <div style="width:100%;">
        @ChildContent
    </div>
    <div style="display:@(showCode ? "block" : "none"); width:100%">
        <pre style="padding: 20px; white-space:pre-wrap; word-wrap:break-word;background-color:@ThemeProvider!.Theme.Palette.Black;color:@ThemeProvider!.Theme.Palette.White;">
           @codeLiteral
            <br />
           @if (!showCCode)
           {
            <BlazorFluentUI.Link OnClick="(args)=>showCCode=true">Show additional C# code...</BlazorFluentUI.Link>
           }
           else
           {
                @ccodeLiteral
           }
        </pre>
    </div>
</Stack>
